<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../slider/style.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
    <div class="wrapper" id="indexVue">
        <embed class="embed-wrapper" src="./top.html" />
        <div class="container  content-wrapper">
            <div class="slider-wrapper">
                <div class="slider-content" id="slider"></div>

            </div>

            <div class="row main-wrapper">
                <!-- 左侧菜单 -->
                <div class="col-md-3 left-content">
                    <ul class="list-group">
                        <li class="list-group-item" @click="addOrder">新增订单</li>
                        <li class="list-group-item">个人订单</li>
                        <li class="list-group-item">
                            <button class="btn btn-danger" type="button">
                                消息中心 <span class="badge">4</span>
                            </button>
                        </li>
                    </ul>

                </div>
                <!-- 右侧内容 -->
                <div class="col-md-9 right-content">

                    <!-- 进行中的订单 -->
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">进行中订单</div>
                        <div class="panel-body">
                            <p>...</p>
                        </div>

                        <!-- Table -->
                        <table class="table">
                            ...
                        </table>
                    </div>

                    <!-- 新闻 -->
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">新闻</div>
                        <div class="panel-body">
                            <div class="media">
                                <div class="media-left media-middle">
                                    <!-- <a href="#">
                                        <img class="media-object" src="./images/news.jpg" style="width: 220px;">
                                    </a> -->
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">两会召开</h4>
                                    树立双赢多赢共赢理念。行政公益诉讼涉及政府履职，本质是助力政
                                    府依法行政，共同维护人民根本利益，得到各方面有力支持。黑龙江省人
                                    大常委会就检察公益诉讼专门作出决定，该省检察机关专项调查387家小
                                    煤矿关闭整治公益保护问题，发现违法违规和犯罪问题线索132件；对公
                                    益受损案件，以检察建议督促主管机关履职，取得良好成效。针对公益
                                    诉讼案件确定管辖难、调查取证难、司法鉴定难等问题，会同最高人民
                                    法院出台司法解释，与生态环境部等9部委会签协作意见；河北、上海、
                                    广西、陕西等地检察机关与有关部门建立协作联动机制。全国县级检察
                                    院办理公益诉讼案件已做到全覆盖。
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <embed class="embed-wrapper" src="./footer.html">

        <!-- 登录注册模态窗 -->
        <div class="modal" id="loginModal">
            <div class="modal-wrapper container">
                <h3>登录和注册</h3>
                <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                data-toggle="tab">登录</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                data-toggle="tab">注册</a></li>

                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <form>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">手机号</span>
                                    <input type="text" class="form-control" id="userName" placeholder="手机号"
                                        aria-describedby="sizing-addon1">
                                </div>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">密码</span>
                                    <input type="text" class="form-control" id="passsWord" placeholder="密码"
                                        aria-describedby="sizing-addon1">
                                </div>
                                <div class="msg-info"><span>忘记密码？</span><a href="#">找回密码</a></div>

                                <div class="btn-pane">
                                    <button class="btn btn-info">登录</button>
                                    <button class="btn btn-info">取消</button>
                                </div>
                            </form>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <form>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">姓名</span>
                                    <input type="text" class="form-control" id="userName" placeholder="姓名"
                                        aria-describedby="sizing-addon1">
                                </div>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">性别</span>
                                    <input type="text" class="form-control" id="sex" placeholder="性别"
                                        aria-describedby="sizing-addon1">
                                </div>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">手机号</span>
                                    <input type="text" class="form-control" id="phoneNum" placeholder="手机号"
                                        aria-describedby="sizing-addon1">
                                </div>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">密码</span>
                                    <input type="text" class="form-control" id="passsWord1" placeholder="密码"
                                        aria-describedby="sizing-addon1">
                                </div>
                                <div class="input-group input-group">
                                    <span class="input-group-addon" id="sizing-addon1">确认密码</span>
                                    <input type="text" class="form-control" id="passsWord2" placeholder="确认密码"
                                        aria-describedby="sizing-addon1">
                                </div>

                                <div class="btn-pane">
                                    <button class="btn btn-info">下一步</button>
                                    <button class="btn btn-info">取消</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../js/jquery.min.2.1.4.js"></script>
<script type="text/javaScript" src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javaScript" src="../slider/js.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    $("#slider").sliderImg({
        image: ['../images/s1.jpg', '../images/s2.jpg', '../images/s3.jpg',
            '../images/s4.jpg']
    });

    var indexVue = new Vue({
        el: '#indexVue',
        data:function() {
            return {

            }
        },
        methods: {
            addOrder:function() {
                window.location.href = './indentor/addOrder.html';
            },
            // 登录页面
            openLoginPane:function() {
                // alert(999);
                $('#loginModal').modal('show')
            }
        }
    })


</script>